<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <div
    class="w-300px h-300px flex justify-between items-center flex-col m-auto mb-30px position-relative mt-80rpx b-1px b-solid b-red"
  >
    <canvas
      id="my-canvas"
      canvas-id="my-canvas"
      class="position-absolute w-300px h-300px z-0"
    ></canvas>
    <div class="triangle"></div>
  </div>
</template>

<script lang="ts" setup>
const context = uni.createCanvasContext('my-canvas')
context.setStrokeStyle('#FBD3A7') // 设置 填充的颜色
context.moveTo(50, 150) // 设置 绘制起始坐标
context.lineTo(140, 150) // 设置 中途点
context.quadraticCurveTo(150, 150, 150, 160) // 绘制二次贝赛尔曲线
context.lineTo(150, 200) // 绘制结束坐标
context.stroke() // stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
context.draw() // 绘制
</script>

<style lang="scss" scoped>
.triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #fbd3a7;
  animation: move 3000ms infinite linear;
  offset-path: path('M 50 150 L 140 150 Q 150 150 150 160 L 150 200');
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
</style>
